<template>
  <!-- <div id="top_1_1" style="width:100%;height:300px"></div> -->
  <el-carousel indicator-position="outside">
    <el-carousel-item>
      <div id="top_1_1" style="width:100%;height:100%"></div>
    </el-carousel-item>
    <!-- <el-carousel-item>
      <div id="top_1_2" style="width:1053px;height:456px"></div>
    </el-carousel-item>-->
  </el-carousel>
</template>
<script>
import echarts from "echarts";
import { accountdata } from "@/api/api.js";
export default {
  data() {
    return {
      content: null,
      content2:null
    };
  }, 
  mounted() {
    this.accountdataFn();
  },
  methods: {
    async accountdataFn() {
      var params = {
        id: 1,
        accountType: "human"
      };
      var params_robot = {
        id: 1,
        accountType: "robot"
      };
      var data = await accountdata(params);
      var data2 = await accountdata(params_robot)
      console.log(data);
      console.log(data2)
      try {
        if (data.data.code == 200) {
          this.content = data.data.content;
        }
        if (data2.data.code == 200) {
          this.content2 = data2.data.content;
        }
        this.renderFn();
      } catch (e) {
        console.log(e);
      }
    },
    renderFn() {
      var myChart1 = echarts.init(document.getElementById("top_1_1"));
      var option1 = {
        
        tooltip: {
          trigger: "axis",
          showDelay: 0,
          formatter: function(params) {
            var params = params[0]
            if (params.value.length > 1) {
              return (
                params.seriesName +
                " :<br/>" +
                params.value[0] +
                " " +
                params.value[1] +
                " "
              );
            } else {
              return (
                params.seriesName +
                " :<br/>" +
                params.name +
                " : " +
                params.value +
                " "
              );
            }
          },
          axisPointer: {
            show: true,
            type: "cross",
            lineStyle: {
              type: "dashed",
              width: 1
            }
          }
        },
        legend: {
          data: ["人类", "机器人"],
          right: 40,
          top: 12,
          textStyle: {
            color: "#FFF"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        toolbox: {
          show: true,
          feature: {
            //mark : {show: true},
            //dataZoom : {show: true},
            //dataView : {show: true, readOnly: false},
            //restore : {show: true},
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: "value",
            name: "followers",
            scale: true,
            axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
            axisLabel: {
              formatter: "{value} ",
               fontSize: 15
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "following",
            scale: true,
            axisLine: {
            lineStyle: {
              color: "#fff"
            }
            },
            axisLabel: {
              formatter: "{value} ",
              fontSize: 15
            }
          }
        ],
        series: [
          {
            name: "人类",
            type: "scatter",
            data: this.content.list,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#20BAFF"
                  },
                  {
                    offset: 1,
                    color: "#023B59"
                  }
                ])
              }
            }
          },
          {
            name: "机器人",
            type: "scatter",
            data: this.content2.list,
             itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#06FFC5"
                  },
                  {
                    offset: 1,
                    color: "#02574F"
                  }
                ])
              }
            }
          },
          
        ]
      };
      myChart1.setOption(option1);
      // var myChart2 = echarts.init(document.getElementById("top_1_2"));
      // var option2 = {
      //   tooltip: {
      //     trigger: "axis"
      //   },
      //   legend: {
      //     color: ["#F58080", "#47D8BE", "#F9A589"],
      //     data: ["新报", "流失", "续费"],
      //     left: "center",
      //     bottom: "bottom"
      //   },
      //   grid: {
      //     top: "middle",
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     height: "80%",
      //     containLabel: true
      //   },
      //   xAxis: {
      //     type: "category",
      //     data: [100, 200, 20, 30, 60, 89],
      //     axisLine: {
      //       lineStyle: {
      //         color: "#FFF"
      //       }
      //     }
      //   },
      //   yAxis: {
      //     type: "value",

      //     splitLine: {
      //       lineStyle: {
      //         type: "dashed",
      //         color: "#FFF"
      //       }
      //     },
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: "#FFF"
      //       }
      //     },
      //     nameTextStyle: {
      //       color: "#FFF"
      //     },
      //     splitArea: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: "新报",
      //       type: "line",
      //       data: [800, 900, 220, 130, 660, 289],
      //       color: "#F58080",
      //       lineStyle: {
      //         normal: {
      //           width: 5,
      //           color: {
      //             type: "linear",

      //             colorStops: [
      //               {
      //                 offset: 0,
      //                 color: "#FFCAD4" // 0% 处的颜色
      //               },
      //               {
      //                 offset: 0.4,
      //                 color: "#F58080" // 100% 处的颜色
      //               },
      //               {
      //                 offset: 1,
      //                 color: "#F58080" // 100% 处的颜色
      //               }
      //             ],
      //             globalCoord: false // 缺省为 false
      //           },
      //           shadowColor: "rgba(245,128,128, 0.5)",
      //           shadowBlur: 10,
      //           shadowOffsetY: 7
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "#F58080",
      //           borderWidth: 10,
      //           /*shadowColor: 'rgba(72,216,191, 0.3)',
      //                shadowBlur: 100,*/
      //           borderColor: "#F58080"
      //         }
      //       },
      //       smooth: true
      //     },
      //     {
      //       name: "流失",
      //       type: "line",
      //       data: [123, 568, 111, 222, 123, 56],
      //       lineStyle: {
      //         normal: {
      //           width: 5,
      //           color: {
      //             type: "linear",

      //             colorStops: [
      //               {
      //                 offset: 0,
      //                 color: "#AAF487" // 0% 处的颜色
      //               },
      //               {
      //                 offset: 0.4,
      //                 color: "#47D8BE" // 100% 处的颜色
      //               },
      //               {
      //                 offset: 1,
      //                 color: "#47D8BE" // 100% 处的颜色
      //               }
      //             ],
      //             globalCoord: false // 缺省为 false
      //           },
      //           shadowColor: "rgba(71,216,190, 0.5)",
      //           shadowBlur: 10,
      //           shadowOffsetY: 7
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "#AAF487",
      //           borderWidth: 10,
      //           /*shadowColor: 'rgba(72,216,191, 0.3)',
      //                shadowBlur: 100,*/
      //           borderColor: "#AAF487"
      //         }
      //       },
      //       smooth: true
      //     },
      //     {
      //       name: "续费",
      //       type: "line",
      //       data: [125, 568, 25, 36, 784, 56],
      //       lineStyle: {
      //         normal: {
      //           width: 5,
      //           color: {
      //             type: "linear",

      //             colorStops: [
      //               {
      //                 offset: 0,
      //                 color: "#F6D06F" // 0% 处的颜色
      //               },
      //               {
      //                 offset: 0.4,
      //                 color: "#F9A589" // 100% 处的颜色
      //               },
      //               {
      //                 offset: 1,
      //                 color: "#F9A589" // 100% 处的颜色
      //               }
      //             ],
      //             globalCoord: false // 缺省为 false
      //           },
      //           shadowColor: "rgba(249,165,137, 0.5)",
      //           shadowBlur: 10,
      //           shadowOffsetY: 7
      //         }
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "#F6D06F",
      //           borderWidth: 10,
      //           /*shadowColor: 'rgba(72,216,191, 0.3)',
      //                shadowBlur: 100,*/
      //           borderColor: "#F6D06F"
      //         }
      //       },
      //       smooth: true
      //     }
      //   ]
      // };
      // myChart2.setOption(option2);
    }
  }
};
</script>
<style scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #272b306b;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #56575818;
}
</style>
<style>
.top2 .el-carousel {
  height: 100%;
}
.top2 .el-carousel__container {
  height: calc(100% - 50px);
}
</style>